import DesignResource from "./DesignResource.js";

let Fabric = null;

class EditorEmb {
    // 构造函数
    cache = new Map();
    // test = null;
    constructor(FabricClass, fabric, layer) {
        !Fabric && FabricClass && (Fabric = FabricClass);

        this.cache = new Map();
        // // 创建矩形
        // this.test = new Fabric.Rect({
        //     left: 0,
        //     top: 0,
        //     width: 0,
        //     height: 0,
        //     angle: layer.rotate,
        //     scaleX: 1,
        //     scaleY: 1,
        //     originX: "center",
        //     originY: "center",
        //     scaleX: 1,
        //     scaleY: 1,
        //     fill: null,
        //     stroke: "#f00", // 十六进制颜色值
        //     strokeWidth: 1,
        // });

        // fabric.add(this.test);
    }

    // 添加
    insertDst(fabric, layer, dst, scale) {
        const canvas = DesignResource.loadEmb(dst);
        const stage = new Fabric.Image(canvas, {
            originX: "center",
            originY: "center",
        });

        fabric.add(stage);
        this.cache.set(dst, stage);
        this.updateDst(fabric, layer, dst, scale);
    }

    // 更新
    updateDst(fabric, layer, dst, scale) {
        const stage = this.cache.get(dst);
        const image = stage._element || { width: dst.w, height: dst.h };
        const width = dst.w * scale;
        const height = dst.h * scale;
        const imgSale = Math.max(width / image.width, height / image.height);
        const keys = ["line_color", "stitches"];
        const change = keys.find((key) => dst[key] != stage[key]);

        stage.set({
            left: (dst.x + layer.x + 0.5 * dst.w) * scale,
            top: (dst.y + layer.y + 0.5 * dst.h) * scale,
            width: image.width,
            height: image.height,
            angle: dst.rotate,
            scaleX: imgSale,
            scaleY: imgSale,
            originX: "center",
            originY: "center",
        });

        stage.line_color = dst.line_color;
        stage.stitches = dst.stitches;
        if (change) {
            stage.setElement(DesignResource.loadEmb(dst));
            // 更新字体时取值stage._element可能不及时导致缩放计算错误，所以当加载后再更新一次获取最新的image计算
            this.updateDst(fabric, layer, dst, scale);
        }
    }

    // 删除
    removeDst(fabric, layer, dst) {
        const stage = this.cache.get(dst);
        fabric.remove(stage);
        this.cache.delete(layer);
    }

    // 更新绣框
    updateLayer(fabric, layer, scale) {
        const list = Array.from(this.cache.keys());
        const inside = [];

        layer.dists.map((item) => {
            const stage = this.cache.get(item);
            if (!stage) {
                // 添加
                this.insertDst(fabric, layer, item, scale);
                inside.push(item);
            } else {
                // 更新
                this.updateDst(fabric, layer, item, scale);
                inside.push(item);
            }
        });

        // 删除
        list.filter((item) => !inside.find((i) => i == item)).map((i) =>
            this.removeDst(fabric, layer, i)
        );
    }
}

export default EditorEmb;
